<template>
	<view class="set-container">
		<view class="topVue">
			<view class="status"></view>
			<view class="navVue">
				<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun"></image>
				
				<view class="nav-title">仓位设置</view>
				<view style="width: 36rpx; height: 36rpx;" @click="toDetail"></view>	
			</view>
		</view>
		
		<view class="place"></view>
		
		<u--form labelPosition="top" labelWidth="auto" :model="form" :rules="rules" ref="uForm">
			<u-form-item :label="$t('策略')" prop="status">
				<u-radio-group v-model="form.status" placement="row" @change="change">
					<u-radio size="40" 
						labelSize="30" 
						labelColor="#333"
						active-color="#D55B94"
						v-for="(item, index) in radiolist" :key="item.value"
						:label="item.name" :name="item.value"></u-radio>
				</u-radio-group>
			</u-form-item>
			
			
			<u-form-item :label="$t('仓位')" prop="cw">
				<u--textarea v-model="form.cw" autoHeight :placeholder="$t('请输入')"
					placeholderStyle="{color: #999999}"></u--textarea>
			</u-form-item>
			<!--      <u-form-item label="试算金额" prop="price">-->
			<!--        <u&#45;&#45;textarea-->
			<!--          v-model="form.price"-->
			<!--          autoHeight-->
			<!--          placeholder="请输入"-->
			<!--          placeholderStyle="{color: #999999}"-->
			<!--        ></u&#45;&#45;textarea>-->
			<!--      </u-form-item>-->
		</u--form>
		<view class="btns">
			<u-button class="close" type="primary" :text="$t('取消')" @click="close"></u-button>
			<u-button class="confirm-btn" type="primary" :text="$t('确定')" @tap="submint"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				form: {
					status: "1",
					cw: 0,
					price: 0,
				},
			};
		},
		computed: {
			radiolist() {
				return [{
						name: this.$t("保守"),
						value: "1",
					},
					{
						name: this.$t("稳健"),
						value: "2",
					},
					{
						name: this.$t("激进"),
						value: "3",
					},
				]
			},
			rules() {
				return {
					status: {
						required: true,
						message: this.$t("请选择"),
						trigger: ["blur", "change"],
					},
					cw: {
						required: true,
						message: this.$t("请输入"),
						trigger: ["blur", "change"],
					},
					price: {
						required: true,
						message: this.$t("请输入"),
						trigger: ["blur", "change"],
					},
				}
			}
		},
		methods: {
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			change(e){
				console.log(e)
			},
			submint() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						console.log(this.form);
						this.$http
							.post(
								`/front/trade/setPosition?id=${this.id}&type=${this.form.status}&amount=${this.form.cw}&guess=${this.form.price}`
							)
							.then((res) => {
								console.log(res, "=res");
								if (res.code === 0) {
									uni.$u.toast(this.$t("仓位设置成功"));
									uni.navigateBack();
								}
							})
							.catch((err) => {
								console.error(err);
							});
						// uni.navigateTo({
						// 	url: `/pages/finance/evidence`
						// })
					})
					.catch((errors) => {
						uni.$u.toast(this.$t("校验失败"));
					});
			},
			close() {
				uni.navigateBack();
			},
		},
		onLoad(options) {
			console.log(options)
			if (options) {
				this.form.status = options.type || '1';
				this.form.price = options.guess;
				this.form.cw = options.amount;
				this.id = options.id;
			}
			console.log(this.form.status)
		},
	};
</script>

<style lang="scss" scoped>
	.set-container {
		width: 100%;
		height: 100%;
		background: url("../../static/imgs/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;
		.place {
			height: calc(var(--status-bar-height) + 92rpx);
		}
		
		.topVue {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
		
			.status {
				width: 100%;
				height: var(--status-bar-height);
			}
		
			.navVue {
				width: 100%;
				height: 92rpx;
				background: linear-gradient(to right, #FFFBFF, #FFE7F4);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;
		
				.nav-title {
					width: 420rpx;
					height: 92rpx;
					font-size: 36rpx;
					color: #04094C;
					text-align: center;
					line-height: 92rpx;
				}
			}
		}

		/deep/ .u-form {
			width: 690rpx;
			box-sizing: border-box;
			margin-bottom: 100rpx;
			margin: 30rpx auto 0;
			padding: 30rpx;
			color: #333;
			background: #fff;
			border-radius: $border-radius-20;

			.u-form-item__body__left {
				margin-bottom: 40rpx !important;

				.u-form-item__body__left__content__label {
					color: #333;
				}
			}

			.u-radio-group {
				padding-bottom: 30rpx;
				// border-bottom: 2rpx solid #343547;

				.u-radio {
					margin-right: 60rpx;
				}
			}

			.u-textarea {
				background: #343547;
				border-radius: $border-radius-20;
				background:  #f5f5f5 !important;
				border: none;
				.uni-textarea-textarea {
					color: #111;
				}
			}
		}

		.btns {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: $uni-font-size-30;
			margin: 60rpx auto 0;
			.close {
				background: #121325;
				color: #D55B94;
			}

			.u-button {
				width: 280rpx;
				height: 80rpx;
				color: #333;
				background: #E9E7E9;
				border-radius: $border-radius-20;
				border: none;
			}

			.confirm-btn {
				background: #D55B94;
				color: #fff;
			}
		}

		// /deep/ .u-radio__icon-wrap {
		// 	background-color: transparent !important;
		// 	border-color: $uni-text-color-666 !important;
		// }
	}
</style>